<!DOCTYPE html>
<html style="background-color: #ffffff;">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>Activities</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <link rel="stylesheet" href="../../css/font-awesome.min.css">
</head>
<style>
    .content {
        position: relative;
        top: 6.5rem;
        height: 3.7rem;
        border-bottom: 0.05rem solid #cecece;
        background-color: #ffffff;
    }

    .time {
        position: relative;
        top: 4rem;
        background-color: #ffffff;
        /* border-bottom: 0.05rem solid #e2e2e2; */
    }

    .time1 {
        position: relative;
        height: 2rem;
        line-height: 2.0rem;
        border-bottom: 0.05rem solid #e2e2e2;
    }

    .time2 {
        border-top: 0rem solid #cecece;
        position: relative;
        height: 2rem;
        line-height: 2.0rem;
  
    }

    .btn {
        top: 6.5rem;
        position: absolute;
        ;
        width: 100%;
        /* margin-left: 4rem; */
        height: 2rem;
        border-radius: 1rem;
    }

    .content .name {
        /* width: 3.25rem; */
        /* display: flex;
        justify-content: center;
        align-items: center; */
        height: 1.2rem;
        line-height:1.2rem;
        text-align: center;
        color:  red;
    }

    .circle {
        width: 30%;
        height: 40%;
        text-align: center;
        color: red;
        margin: 0 rem;
        margin-left: 0.5rem;
        border: 0.3rem solid;
        border-radius: 80%;
        background-color: red;
    }
    .all {
        width: 100%;
        height:2.2rem;
        display:flex;
        flex-wrap:nowrap;
        justify-content: space-around;
    }
   
    .act {
        width:20%;
        height:2.2rem;
        /* background: red; */
    }
    .act_top {
        width:100%;
        height: 1.1rem;
        line-height: 1.1rem;
        text-align: center;
        font-size:0.7rem;
    }
    .act_bottom {
        width:100%;
        height:1.1rem;
        line-height: 1.1rem;
        font-size:0.65rem;
        text-align: center;
    }
</style>

<body>
    <header id="head" ; class="aui-bar aui-bar-nav" style="background-color:rgb(249,249,251);position:fixed; z-index:2;height:2.5rem;padding-top:0rem">
        <img src="../../image/321jiedui.png" alt="321照片">
    </header>
    <div class="time">
        <div class="time1" @click="">
            <p style="position:absolute; left: 0.2rem;top: 12.5%;color: #000;width: 4rem">开始时间:</p>
            <input style="position: absolute; left:4rem;padding-top: 0.7rem;width: 13rem" v-model="beginTime" type="date">
        </div>
        <div class="time2">
            <p style="position:absolute; left: 0.2rem;top: 12.5%;color: #000;width: 4rem">结束时间:</p>
            <input style="position: absolute; left:4rem;padding-top: 0.7rem;width: 13rem" v-model="endTime" type="date">
        </div>
        <div class="aui-content aui-margin-b-15" style="border:0px solid red !important">
            <ul class="aui-list aui-form-list">
                <li class="aui-list-item">
                    <div class="aui-list-item-inner">
                        <div class="aui-list-item-input">
                            <label style="font-size: 0.7rem !important;margin-right: 2rem;"><input class="aui-radio"
                                    type="radio" v-model="type" value="1" name="demo1" > 按部门查询</label>
                            <label style="font-size: 0.7rem !important;"><input class="aui-radio" type="radio" name="demo1"
                                    v-model="type" value="2" checked=""> 按人员查询</label>
                        </div>
                    </div>
                </li>
            </ul>
            <button class="btn aui-btn-info" style="width:80%;left:10%;" @click="search()">搜 索</button>
        </div>
    </div>

    <div class="content" v-for="item in teachers" v-if="showif">
        <div class="name">
            <div style="font-size: 0.7rem">
                {{item.name}}
            </div>
        </div>
        <div class="all">
                <div class="act">
                    <div class="act_top">{{item.typ1}}</div>
                    <div class="act_bottom"> 进班级</div>
                </div>
                <div class="act">
                        <div class="act_top">{{item.typ2}}</div>
                        <div class="act_bottom"> 进宿舍</div>
                </div>
                <div class="act">
                        <div class="act_top">{{item.typ3}}</div>
                        <div class="act_bottom"> 进食堂</div>
                </div>
                <div class="act">
                        <div class="act_top">{{item.typ4}}</div>
                        <div class="act_bottom"> 联系家长</div>
                </div>
                <div class="act">
                        <div class="act_top">{{item.typ5}}</div>
                        <div class="act_bottom"> 联系学生</div>
                </div>
        </div>
    </div>

</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/vue1.0.js"></script>
<script type="text/javascript" src="../../script/util.js"></script>
<script src="../../script/constant.js"></script>
<script type="text/javascript">
    apiready = function () {
        vm = new Vue({
            el: "body",
            data: {
                teachers: [],
                beginTime: "",
                endTime: "",
                showif: false,
                type: 2
            },
            methods: {
                search: function () {
                    api.showProgress({
                        title: '正在获取中...',
                        text: '先喝杯茶...',
                        modal: false
                    });
                    var me = this;
                    me.showif = true;
                    api.ajax({
                        url: serverIp + "/friend/getxiatimeActivity.do  ",
                        method: 'post',
                        timeout: 10,
                        data: {
                            values: {
                                beginTime: me.beginTime,
                                endTime: me.endTime,
                                type: me.type
                            }
                        }
                    }, function (ret, err) {
                        api.hideProgress();
                        if (ret) {
                            me.teachers = [];
                            me.teachers = ret.result;
                        } else {
                            alert(JSON.stringify(err));
                        }
                    });

                }
            },
            created: function () {
                var me = this;
                var date = new Date();
                date.setDate(1);
                this.beginTime = date.format("yyyy-MM-dd");
            }
        });
    }

</script>

</html>